import { NavLink } from 'react-router-dom'
import React, { useEffect, useState } from 'react'
import { getBanner } from '@/service/api'//引入统一管理接口的文件
import Guess from '@/components/guess/Guess'
import { Swiper, SwiperSlide } from 'swiper/react' // 引入轮播图组件
import SwiperCore, { Pagination } from 'swiper'; // 引入轮播图插件
import 'swiper/swiper.scss' // 引入swiper样式
import 'swiper/components/pagination/pagination.scss'; // 引入轮播图插件样式
SwiperCore.use([Pagination]) // 给轮播图安装插件


const FirstPage = (props) => {

  const navList = [
    {
      text: '精选',
      path: '/home'
    },
    {
      text: '男生',
      path: '/test'
    },
    {
      text: '女生',
      path: '/test'
    },
    {
      text: '悬疑',
      path: '/test'
    },
    {
      text: '言情',
      path: '/test'
    },
    {
      text: '玄幻',
      path: '/test'
    }
  ]
  const conNav = [
    {
      path: '/home',
      text: '排行',
      icon: 'cup'
    },
    {
      path: '/home',
      text: '分类',
      icon: 'fenlei'
    },
    {
      path: '/home',
      text: '新书',
      icon: 'books'
    },
    {
      path: '/home',
      text: '更新',
      icon: '-'
    },
    {
      path: '/home',
      text: '完结',
      icon: 'rocket__easyi'
    }
  ]

  const [banner, setBanner] = useState([])
  const link = () => {
    props.history.push('/search')
  }
  useEffect(() => {
    // 请求轮播图数据
    getBanner().then(res => {
      setBanner(res.data)
    })
  }, [])

  const toDetail = (item) => {
    props.history.push('/detail')
  }

  return (
    <div className="page first-page">
      <header>
        <nav>
          {navList.map(item =>
            <NavLink key={item.text} to={item.path}>{item.text}</NavLink>
          )}
        </nav>
        <div className="search">
          <p onClick={link}><i className="iconfont icon-fangdajing"></i><input type="text" readOnly placeholder="搜索书籍" /></p>
          <span></span>
        </div>
        <div className="swiper">
          <Swiper
            pagination={{ clickable: true }}
            loop
          >
            {banner.map(item =>
              <SwiperSlide key={item._id}><img src={item.img} alt="" /></SwiperSlide>
            )}
          </Swiper>

        </div>
      </header>
      <div className="nav">
        {conNav.map(item =>
          <NavLink key={item.text} to={item.path}>
            <svg className="icon" aria-hidden="true">
              <use xlinkHref={`#icon-${item.icon}`}></use>
            </svg>
            {item.text}
          </NavLink>
        )}
      </div>
      <Guess title="猜你喜欢" />
    </div>
  )
}

export default FirstPage
